<template>
  <div class="day-scheduling">
    <div class="day-scheduling-r">
      <div class="day-scheduling-r-t mb10">
        <div class="scheduling-header">
          <div class="scheduling-header-name">
            班次:
          </div>
          <div class="scheduling-header-list" v-if="SignCatelist">
            <div class="scheduling-header-list-line" v-for="(item, index) in SignCatelist"
                 :style="{'background': item.color}" @click="checkScheduling(item)">
              <div v-if="item.id">
                {{ item.name }}
                {{
                  `${item.comeTime1}-${item.outNext1 ? '次日' : ''}${item.outTime1} ${item.comeTime2 && item.comeNext2 ? '次日' : ''}${item.comeTime2 || ''}${item.comeTime2 ? '-' : ''}${item.outTime2 && item.outNext2 ? '次日' : ''}${item.outTime2 || ''}`
                }}
              </div>
              <div v-else class="scheduling-header-list-type">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div v-else class="not-workTime">
            暂无班次信息
          </div>
        </div>
      </div>
      <div class="day-scheduling-r-b mt10">
        <div class="day-scheduling-r-b-top">
          <div class="day-scheduling-r-b-top-l">
            <span class="el-icon-document-checked" @click="checkAll(1)">全部选中</span>
            <span class="el-icon-delete" @click="checkAll(2)">删除选中排班</span>
            <span class="el-icon-delete" @click="checkAll(3)">清空选中</span>
          </div>
          <div class="day-scheduling-r-b-top-lr">
            <el-select v-model="valueWork" placeholder="请选择" size="small" class="mr10" @change="changeFn()">
              <el-option
                v-for="item in postList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="monthThis"
              size="small"
              type="month"
              format="yyyy-MM"
              value-format="yyyy-MM"
              placeholder="选择月">
            </el-date-picker>
            <!--              <el-date-picker-->
            <!--                v-model="value1"-->
            <!--                size="small"-->
            <!--                type="daterange"-->
            <!--                range-separator="至"-->
            <!--                :picker-options="pickerOptions2"-->
            <!--                format="yyyy-MM-dd"-->
            <!--                value-format="yyyy-MM-dd"-->
            <!--                start-placeholder="开始日期"-->
            <!--                end-placeholder="结束日期">-->
            <!--              </el-date-picker>-->
            <el-button
              class="ml10"
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
            >搜索
            </el-button>
          </div>
        </div>
        <div class="attendance-body mt10">
          <div class="attendance-body-header">
            <div class="attendance-body-th-list attendance-body-header-title">
              <div class="attendance-body-header-inline">
                <!--                <span>姓名</span>-->
                <!--                <span>岗位</span>-->
                姓名/岗位
              </div>
            </div>
            <div class="attendance-body-th-list-user weekList" v-for="(team,index_) in teamlist"
                 @click="teamUser(team)">
              <div class="attendance-body-header-inline">
                {{ team.nickName }}
                <span class="postName" v-if="team.projectPost">{{
                    team.projectPost ? team.projectPost.name : ''
                  }}</span>
              </div>
              <!--              {{ `${team.nickName}(${team.isMaster ? '主岗' : '兼岗'})` }}-->
            </div>
          </div>
          <div class="attendance-body-body">
            <div class="attendance-body-th-body" :style="{'width': dayMonth.length*70+'px'}">
              <div class="attendance-body-th-list weekList" v-for="item in dayMonth" @click="weekDay(item)">
                <span>周{{ item.week }}</span>
                <span>{{ item.dayOne }}</span>
              </div>
            </div>
            <div class="attendance-body-r">
              <div class="attendance-body-r-list" :style="{'width': dayMonth.length*70+'px'}"
                   v-for="(team,index_) in teamlist">
                <div class="attendance-body-r-list-box" v-for="item in dayMonth" @click="dayName(team, item)">
                  <!--                  <div class="attendance-box-th-box">-->
                  <!--                      <span style="background:#457eca">-->
                  <!--                      美峰白班-->
                  <!--                    </span>-->
                  <!--                    <em class="iconfont icon-youxiajiaoxuanzhong"></em>-->
                  <!--                  </div>-->
                  <div class="attendance-box-th-box">
                      <span
                        :style="{'backgroundColor': userData[team.userId] && userData[team.userId][item.day]?userData[team.userId][item.day].color:'','color': userData[team.userId] && userData[team.userId][item.day]?(userData[team.userId][item.day]?'#fff':'#000'):''}">
                        {{
                          userData[team.userId] && userData[team.userId][item.day] ? userData[team.userId][item.day].name : ''
                        }}
                    </span>
                    <em class="iconfont icon-youxiajiaoxuanzhong"
                        v-if="checkBox[team.userId] && checkBox[team.userId].indexOf(item.day)!==-1"></em>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listStagnationPointUser} from "@/api/system/stagnation_point";
import {listSignCate, listScheduling} from "@/api/system/sign_category";
import {addSchedule, delSchedule} from "@/api/system/scheduling"
import {mapGetters} from 'vuex'

export default {
  dicts: ['sys_work_post'],
  name: "schedulingEdit",
  props: ['pointData', 'projectData'],
  computed: {
    ...mapGetters([
      'deptId'
    ]),
  },
  watch: {
    pointData() {
      // this.listSchedulingFn() // 驻点排班记录
      // this.queryParams.pointsId = this.pointData.id
      // this.getList()
    },
    chooseUser() {
      this.listSchedulingFn(this.chooseUser)
    },
    projectData() {
      this.getPost()
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        pointsId: 0
      },
      queryParamsCate: {
        pageNum: 1,
        pageSize: 100,
        pointsId: 0
      },
      postList: [],
      valueWork: '',
      loading: false,
      teamlist: [],
      ids: [],
      pickerOptions2: {
        onPick: function ({minDate, maxDate}) {
          if (minDate && !maxDate) {
            const currentDateTimestamp = minDate.getTime();
            const minDateTimestamp = currentDateTimestamp - 3600 * 1000 * 24 * 31;
            const maxDateTimestamp = currentDateTimestamp + 3600 * 1000 * 24 * 31;
            this.disabledDate = date => {
              const dateTimestamp = date.getTime();
              return dateTimestamp <= minDateTimestamp || dateTimestamp >= maxDateTimestamp;
            };
          }
        }
      },
      options: [],
      value: '',
      monthThis: '',
      value1: '',
      dayMonth: [],
      SignCatelist: null,
      checked: false,
      color: ['#457eca', '#ad6acd', '#cfe375', '#ca6f45', '#ad6acd', '#ad6acd'],
      chooseUser: 0, // 选中的用户
      chooseDay: [], // 选中的日期
      chooseWork: {}, // 日期安排的班次
      flag: true,
      // new
      checkDay: {},
      checkBox: {}, // 选中的数据
      userData: {},
      detelStatus: true,
      teamlistDefult: [],
      teamlistArray: {}
    }
  },
  created() {
    // 一进入进行日期的筛选
    this.queryParams.pointsId = this.pointData ? this.pointData.id : 0
    this.queryParamsCate.pointsId = this.pointData ? this.pointData.id : 0
    if (this.projectData) {
      this.getPost()
    }
    // this.getPostList()
    this.getList()
    this.getSchedulingList() // 当前驻点班次
    let tiem_ = this.newDate().split('-')
    this.monthThis = tiem_.join('-')
    this.getDaysOfWeek(tiem_[0], tiem_[1])
  },
  methods: {
    getPost() {
      this.postList = this.$deepCopy(this.projectData.projectPostList)
      console.log('this.postList==>', this.postList)
      this.postList.unshift({
        id: '',
        name: '全部'
      })
    },
    // 点击当天
    dayName(team, item) {
      if (this.checkBox[team.id]) {
        let a_ = this.$deepCopy(this.checkBox[team.id])
        if (a_.indexOf(item.day) !== -1) {
          a_.splice(a_.indexOf(item.day), 1)
        } else {
          a_.push(item.day)
        }
        this.$set(this.checkBox, team.userId, this.$deepCopy(a_))
      } else {
        this.$set(this.checkBox, team.userId, this.$deepCopy([item.day]))
      }
    },
    // 格式 对象{队员id} 数组【日期】
    // 点击日期
    weekDay(item) {
      let n_ = 0
      // 查看当前日期多少个
      for (let team of this.teamlist) {
        if (this.checkBox[team.userId] && this.checkBox[team.userId].indexOf(item.day) !== -1) {
          n_ = n_ + 1
        }
      }
      console.log('n_:', item, n_)
      if (n_ == this.teamlist.length) {
        // 取消整列
        for (let index in this.checkBox) {
          let b_ = this.$deepCopy(this.checkBox[index])
          b_.splice(b_.indexOf(item.day), 1)
          this.$set(this.checkBox, index, b_)
        }
      } else {
        for (let team of this.teamlist) {
          if (this.checkBox[team.userId]) {
            if (this.checkBox[team.userId].indexOf(item.day) === -1) {
              let c_ = this.$deepCopy(this.checkBox[team.userId])
              c_.push(item.day)
              this.$set(this.checkBox, team.userId, c_)
            }
          } else {
            this.$set(this.checkBox, team.userId, [item.day])
          }
        }
        console.log('checkBox:', this.checkBox)
      }
    },
    // 点击队员
    teamUser(item) {
      if (this.checkBox[item.userId]) {
        let n_ = 0
        for (let day of this.dayMonth) {
          if (this.checkBox[item.userId].indexOf(day.day) !== -1) {
            n_ = n_ + 1
          }
        }
        if (n_ == this.dayMonth.length) {
          this.$set(this.checkBox, item.userId, [])
        } else {
          let b_ = this.$deepCopy(this.checkBox[item.userId])
          for (let day of this.dayMonth) {
            if (this.checkBox[item.userId].indexOf(day.day) == -1) {
              b_.push(day.day)
            }
          }
          this.$set(this.checkBox, item.userId, this.$deepCopy(b_))
        }
      } else {
        let a_ = []
        for (let item of this.dayMonth) {
          a_.push(item.day)
        }
        this.$set(this.checkBox, item.userId, this.$deepCopy(a_))
      }
    },
    // 保存排班设置
    saveScheduleFn() {
      let that = this
      // userData 队员ID -》 排班日期 key
      let data_ = []
      let b_ = this.monthThis.split('-').join('') // 格式20240301
      for (let user in this.userData) {
        let team_ = this.userData[user]
        for (let day in team_) {
          let day_ = team_[day] // 日期排班时间详情
          // startOutTime1 第一组下班时间
          // startOutTime2 第二组下班时间
          // outNext1 // 是否第二天
          // outNext2 // 是否第二天
          let outTime_ = day// 下班时间
          if (!day_.startOutTime2) {
            // 只有一组
            if (day_.outNext1) {
              // 是第二天
              outTime_ = this.nextDay(day) + ` ${day_.startOutTime1}:00`
            } else {
              // 不是第二天
              outTime_ = outTime_ + ` ${day_.startOutTime1}:00`
            }
          } else {
            // er组
            if (day_.outNext2) {
              // 是第二天
              outTime_ = this.nextDay(day) + ` ${day_.startOutTime2}:00`
            } else {
              // 不是第二天
              outTime_ = outTime_ + ` ${day_.startOutTime2}:00`
            }
          }
          console.log('day==>', outTime_)
          data_.push({
            id: day_.isId ? day_.isId : null, // 编辑
            cateId: day_.id, // 考勤方案id
            userId: user, // 用户id
            month: b_, // 月份
            day: day.split('-').join(''), // 日期
            projectId: this.pointData.projectId, //项目id
            pointsId: this.pointData.id, //驻点id
            deptId: this.teamlistArray[user].deptId,
            postId: this.teamlistArray[user].postId, // 岗位id
            workTime: day_.workTime, //工时
            endTime: outTime_
          })
        }
      }
      if (!this.flag) {
        return
      }
      this.flag = false
      this.$modal.loading("正在保存中，请稍候...");
      addSchedule({schedulings: data_}).then(res => {
        // 刷新页面，更新当前用户的排班记录
        this.$message.success('保存成功！')
        this.refreshFn()
        setTimeout(() => {
          that.$modal.closeLoading();
          that.flag = true
        }, 500)
      }).catch(res => {
        setTimeout(() => {
          that.$modal.closeLoading();
          that.flag = true
        }, 500)
      })
    },
    nextDay(specifiedDate) {
      const date = new Date(specifiedDate);
      date.setDate(date.getDate() + 1); // 在原日期基础上加一天
      // 返回格式化后的日期字符串
      return date.toISOString().split('T')[0];
    },
    refreshFn() {
      this.checkBox = {} // 选中的数据
      this.userData = {}
      this.checkBox = []
      this.listSchedulingFn() // 获取当前执勤点排班记录
    },
    /** zhuqi */
    listSchedulingFn(userId) {
      let that = this
      let data_ = {
        pageNum: 1,
        pageSize: 1000,
        pointsId: this.pointData.id, //  驻点
        month: this.monthThis.split('-').join(''), // 月份
      }
      if (userId) {
        data_.userId = userId
      }
      listScheduling(data_).then(res => {
        let a_ = {}
        for (let item of res.rows) {
          if (!a_[item.userId]) {
            a_[item.userId] = {}
          }
          if (this.SignCatelist[item.cateId]) {
            if (item.cateId) {
              item.cate.color = this.SignCatelist[item.cateId].color
            } else {
              item.cate = this.SignCatelist[item.cateId]
            }
          }
          item.cate.isId = item.id
          a_[item.userId][that.splitDateString(item.day)] = item.cate
          // this.$set(this.userData, item.userId, a_[item.userId])
        }
        this.userData = this.$deepCopy(a_)
      })
    },
    splitDateString(dateString) {
      // 假设输入的是一个8位数的日期字符串
      if (dateString.length !== 8) {
        this.$modal.msgError("日期字符串长度不正确，应为8位数字");
        return
      }
      const year = dateString.slice(0, 4);
      const month = dateString.slice(4, 6);
      const day = dateString.slice(6, 8);
      return `${year}-${month}-${day}`
    },
    // 选择班次
    checkScheduling(work) {
      if (JSON.stringify(this.checkBox) == '{}') {
        this.$modal.msgError("选择需要安排班次日期");
        return
      }

      for (let index in this.checkBox) {
        let user_ = this.$deepCopy(this.checkBox[index])// 队员日期信息
        let user_data = {}
        if (this.userData[index]) {
          user_data = this.$deepCopy(this.userData[index])
        }
        for (let item of user_) {
          let work_ = this.$deepCopy(work)
          if (user_data[item] && user_data[item].isId) {
            work_.isId = user_data[item].isId
          }
          user_data[item] = work_
        }
        this.$set(this.userData, index, user_data)
      }
    },
    checkAll(type) {
      // 1 全选 2 清空班次 3 清空选中
      if (type == 1) {
        // checkBox teamlist
        for (let item of this.teamlist) {
          let a_ = []
          for (let day of this.dayMonth) {
            a_.push(day.day)
          }
          this.$set(this.checkBox, item.userId, this.$deepCopy(a_))
        }
      } else if (type == 2) {
        this.deletWork()
      } else if (type == 3) {
        this.checkBox = {}
      }
    },
    deletWork() {
      // checkBox: {}, // 选中的数据
      // userData: {}
      let that = this
      if (JSON.stringify(this.checkBox) == '{}') {
        this.$modal.msgError("选择需要安排班次日期");
        return
      }
      console.log('userData', this.userData)
      let detelId = []
      let now_Time = new Date().getTime() // 开始时间时间戳
      let IsDete = true
      for (let user_ in this.checkBox) {
        for (let day_ of this.checkBox[user_]) {
          if (this.userData[user_] && this.userData[user_][day_] && this.userData[user_][day_].isId) {
            detelId.push(this.userData[user_][day_].isId)
            let end_Time = new Date(`${day_}`).getTime() // 结束时间时间戳
            if (now_Time > end_Time) {
              IsDete = false
            }
          }
        }
      }
      if (detelId.length) {
        if (!IsDete) {
          this.$confirm('删除排班数据不能低于今日时间（包含今日）！', '错误提示', {
            confirmButtonText: '确定',
            type: 'warning',
            showCancelButton: false
          }).then(() => {
          }).catch(() => {
          });
          return
        }
        if (!this.detelStatus) {
          return
        }
        this.detelStatus = false
        // this.$modal.loading("正在保存中，请稍候...");
        this.$modal.confirm('是否确认删除的当前选择的排班？').then(function () {

          return delSchedule(detelId);
        }).then(() => {
          this.$message.success('操作成功！')
          this.refreshFn()
          setTimeout(() => {
            // that.$modal.closeLoading();
            that.detelStatus = true
          }, 500)
        }).catch(() => {
          setTimeout(() => {
            // that.$modal.closeLoading();
            that.detelStatus = true
          }, 500)
        });
      } else {
        this.refreshFn()
      }
    },
    chooseDayFn(day) {
      if (!this.chooseUser) {
        this.$message.error('选择需要排班的人员')
        return
      }
      if (this.chooseDay.indexOf(day) == -1) {
        this.chooseDay.push(day)
      } else {
        this.chooseDay.splice(this.chooseDay.indexOf(day), 1)
      }
      console.log('this.chooseDay:', this.chooseDay)
    },
    /** 变更日期 */
    handleQuery() {
      console.log('$getDayAll:', this.$getDayAll(this.value1[0], this.value1[1]))
      let tiem_ = this.monthThis.split('-')
      this.getDaysOfWeek(tiem_[0], tiem_[1])
    },
    /** 班次 */
    getSchedulingList() {
      this.loading = true;
      listSignCate(this.queryParamsCate).then(response => {
        console.log('response==>', response)
        if (response.rows.length) {
          let list_ = {}
          list_[0] = {
            id: 0,
            name: '休息',
            color: '#ddd'
          }
          for (let index in response.rows) {
            let item = response.rows[index]
            item.color = this.color[index]
            list_[item.id] = item
          }
          console.log('list_:', list_)
          this.SignCatelist = list_;
          this.listSchedulingFn() // 获取当前执勤点排班记录
        }
      });
    },
    /** 多人团队人员 */
    // getUserList() {
    //   this.loading = true;
    //   listStagnationPointUser({
    //     pageNum: 1,
    //     pageSize: 200,
    //     pointsId: this.pointData.id, //  驻点
    //   }).then(response => {
    //     for (let item of response.rows) {
    //       item.dayScheduling = {}
    //     }
    //     this.teamlist = response.rows;
    //     this.listSchedulingFn() // 整个驻点的排班
    //   });
    // },
    newDate() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      return y + '-' + m
    },
    getDaysOfWeek(year, month) {
      let week = ['日', '一', '二', '三', '四', '五', '六']
      let dayMonth = []
      let d = new Date(year, month, 0)
      let day = d.getDate();
      this.widthTable = day * 60 + 100
      let firstDayOfMonth = new Date(year, month - 1, 1)
      //该月第一天是周几?0表示周日，1表示周一...6表示周六
      let dayWeek = firstDayOfMonth.getDay()
      for (let i = 0; i < day; i++) {
        dayMonth.push({
          day: `${year}-${month}-${(i + 1) < 10 ? '0' + (i + 1) : (i + 1)}`,
          dayOne: i + 1,
          month: month,
          week: week[dayWeek],
          dayName: i + 1
        })
        dayWeek++
        if (dayWeek > 6) {
          dayWeek = 0
        }
      }
      this.dayMonth = dayMonth
      console.log('当前月份信息', this.dayMonth)
    },
    getList() {
      this.loading = true
      listStagnationPointUser(this.queryParams).then(response => {
        console.log('当前队员信息', response.rows)
        let a_ = {}
        for (let item of response.rows) {
          a_[item.userId] = item
        }
        this.teamlistArray = this.$deepCopy(a_)
        this.teamlistDefult = response.rows
        this.teamlist = response.rows;
        this.loading = false
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log('selection==>', selection)
      this.ids = selection.map(item => item.postId)
    },
    changeFn() {
      // valueWork
      let list_ = []
      if (this.valueWork) {
        for (let item of this.teamlistDefult) {
          console.log('list_=>', item.postId, this.valueWork)
          if (item.postId == this.valueWork) {
            list_.push(item)
          }
        }
      } else {
        list_ = this.$deepCopy(this.teamlistDefult)
      }
      this.checkBox = {}
      this.teamlist = this.$deepCopy(list_)
    }
    // /** 排序触发事件 */
    // handleSortChange(column, prop, order) {
    //   this.queryParams.orderByColumn = column.prop;
    //   this.queryParams.isAsc = column.order;
    //   this.getList();
    // }
  }
}
</script>

<style scoped>
.day-scheduling {
  display: flex;
}

.day-scheduling-l {
  background: #f4f4f4;
}

.day-scheduling-r {
  overflow: hidden;
  width: 100%;
}

.day-scheduling-r-t {
  padding-top: 10px;
  border-bottom: 1px dashed #ddd;
}

.day-scheduling-r-b {
  width: 100%;
}

.attendance-box {
  overflow-x: auto;
}

.attendance-box-thead {
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  border-left: 1px solid #f4f4f4;
}

.attendance-box-th {
  display: flex;
  flex-direction: column;
  width: 70px;
  float: left;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}

.attendance-box-th:hover {
  background: #ffba00;
  cursor: pointer;
}

.scheduling-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.scheduling-header-name {
  margin-right: 10px;
  width: 50px;
  margin-bottom: 10px;
}

.scheduling-header-list {
  /*display: flex;*/
  overflow: hidden;
  flex: 1;
}

.scheduling-header-list-line {
  margin-right: 10px;
  padding: 3px 10px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin-bottom: 10px;
  float: left;
}

.scheduling-header-list-line:hover {
  text-decoration: underline;
}

.scheduling-header-list-type {
  color: #000;
}

.attendance-box-th-time {
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  color: #000;
}

.attendance-box-th-time span {
  display: block;
  width: 100%;
  height: 16px;
}

.attendance-box-th-box {
  height: 60px;
  position: relative;
  width: 100%;
}

.attendance-box-th-box span {
  display: block;
  height: 59px;
  line-height: 60px;
  width: 100%;
  text-align: center;
}

.attendance-box-th-box em {
  color: #04ae0f;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 18px;
}

.day-scheduling-r-b-top {
  display: flex;
  align-items: center;
}

.day-scheduling-r-b-top-l {
  flex: 1;
}

.day-scheduling-r-b-top-l span {
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
}

.day-scheduling-r-b-top-l span:hover {
  text-decoration: underline;
}

.day-scheduling-r-b-top-lr {

}

.not-workTime {
  color: #ddd;
  margin-bottom: 10px;
}

.attendance-body {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 14px;
  border: 1px solid #ddd;
}

.attendance-body .attendance-body-th-list {
  width: 70px;
  height: 50px;
}

.attendance-body-header {
  width: 120px;
  padding-bottom: 5px;
}

.attendance-body-header .attendance-body-th-list {
  width: 120px;
}

.attendance-body-body {
  overflow: auto;
}

.attendance-body-th-body {
  display: flex;
  align-items: center;
}

.attendance-body-th-list {
  background: #eee;
  width: 70px;
  height: 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ddd;
}

.attendance-body-th-list span {
  display: block;
}

.attendance-body-r-list {
  display: flex;
  align-items: center;

}

.attendance-body-th-list-user {
  height: 60px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attendance-body-r-list-box {
  width: 70px;
  height: 60px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.weekList {
  cursor: pointer;
}

.attendance-body-header-title {
  display: flex;
  align-items: center;
}

.attendance-body-header-inline {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*.attendance-body-header-inline span:first-child {*/
/*  border-right: 1px solid #ddd;*/
/*}*/

/*.attendance-body-header-inline span {*/
/*  flex: 1;*/
/*  text-align: center;*/
/*}*/
.postName {
  font-size: 10px;
  display: block;
  background: #fc761d;
  color: #fff;
  margin-left: 5px;
  height: 14px;
  line-height: 14px;
  border-radius: 6px;
  padding: 0 5px;
}
</style>
